<template>
	<a-tabs
		v-model="activeName"
		@on-click="handleClick"
		:name="name"
		:class="curClassName"
		:style="curStyle"
	>
		<template v-if="containerModel.length > 0">
			<a-tab-pane
				v-for="name of containerModel"
				:tab="getTabPaneCaption(name)"
				:class="getTabPaneClass(name)"
				:style="getTabPaneStyle(name)"
				:key="name"
			>
				<slot :name="name"></slot>
			</a-tab-pane>
		</template>
	</a-tabs>
</template>
<script setup lang="ts">
import { TabPanelProps } from './tab-panel';
const props = defineProps(TabPanelProps);

/**
 * 项名称
 *
 * @memberof AppTabPanel
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppTabPanel
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppTabPanel
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-tab-panel': true,
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 当前激活项
 *
 * @memberof AppTabPanel
 */
const activeName = ref('');

/**
 * 插槽对象
 *
 * @memberof AppTabPanel
 */
const containerModel = computed(() => {
	let containerModel: any[] = [];
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.details &&
		curLayoutModel.details.length > 0
	) {
		curLayoutModel.details.forEach((key: string) => {
			containerModel.push(key);
		});
	}
	return containerModel;
});

/**
 * 处理分页点击
 *
 * @memberof AppTabPanel
 */
const handleClick = (tab: any) => {
	if (props.layoutModelDetails[itemName.value]) {
		props.layoutModelDetails[itemName.value].clickPage(tab);
	}
};

watch(containerModel.value, (newVal) => {
	activeName.value = newVal && newVal.length > 0 ? newVal[0] : '';
	props.layoutModelDetails[itemName.value].clickPage(activeName.value);
});

/**
 * 获取当前分页caption
 *
 * @memberof AppTabPanel
 */
const getTabPaneCaption = (key: string) => {
	const curLayoutModel = props.layoutModelDetails[itemName.value];
	if (
		curLayoutModel &&
		curLayoutModel.tabPages &&
		curLayoutModel.tabPages.length > 0
	) {
		const curTabPage = curLayoutModel.tabPages.find(
			(tabPage: any) => tabPage.name === key
		);
		if (curTabPage) {
			return curTabPage.caption;
		}
	}
	return key;
};

/**
 * 获取当前分页class
 *
 * @memberof AppTabPanel
 */
const getTabPaneClass = computed(() => {
	const getClassNames = (key: string) => {
		const curTabPage = props.layoutModelDetails[key];
		if (curTabPage) {
			const classNames = curTabPage.getLabelDynaClass();
			return Object.assign(classNames, curTabPage.getClassNames());
		}
	};
	return getClassNames;
});

/**
 * 获取当前分页Style
 *
 * @memberof AppTabPanel
 */
const getTabPaneStyle = computed(() => {
	const getStyle = (key: string) => {
		const curTabPage = props.layoutModelDetails[key];
		if (curTabPage) {
			return curTabPage.getLabelStyle();
		}
	};
	return getStyle;
});
</script>
